<template>
    <view>
        <uni-list :border="false">
            <uni-list-item v-for="(item,index) in cardDatas" :key="index" :clickable="true" @click="getDetail(item)">
                <template v-slot:header>
                    <view class="uni-thumb-ktp">
                        <image class="image" :src="item.avatar" mode="aspectFill"></image>
                    </view>
                </template>
                <template v-slot:body>
                    <view>
                        <view class="u-line-1 u-main-color u-font-32">{{item.real_user_name}}
                            <u-tag class="u-m-l-20" :text="item.ktp_grade+'专家'" type="warning" size="mini" />
                            <u-tag v-if="item.is_zuzhang" class="u-m-l-20" text="组长" type="warning" size="mini" />
                            <u-tag v-if="item.is_zhanzhang" class="u-m-l-20" text="站长" type="primary" size="mini" />
                        </view>
                        <view class="u-line-1 u-m-t-16 u-content-color u-font-26">专家类别:<text
                                class="u-tips-color">{{item.ktp_class_name}}</text></view>
                        <view class="textTruncate u-m-t-16 u-content-color u-font-26" style="width: 95%;">派往单位:<text
                                class="u-tips-color">{{item.paizhu}}</text></view>
                        <view class="textTruncate u-m-t-16 u-content-color u-font-26" style="width: 95%;">派出单位: <text
                                class="u-tips-color">{{item.paichu}}</text></view>
                    </view>
                </template>
            </uni-list-item>
        </uni-list>
    </view>
</template>

<script>
    /**
     * 栏目 - 横向 - 左图
     * @description 此组件一般用于展示数据列表。
     * @tutorial https://www.dfer.site
     * @property {Number} type 数据类型
     * @property {Array} cardDatas 数据列表
     * @example <dfer-horizontally-left-img-list :cardDatas="item.data.value" />
     */
    export default {
        name: "dfer-horizontally-left-img-list",
        data() {
            return {}
        },
        props: {
            cardDatas: {
                type: Array,
                required: true,
            }
        },
        methods: {
            getDetail(item) {
                uni.navigateTo({
                    url: `/pages/index/index_zj?id=${item.id}`
                })
            }
        }

    }
</script>

<style lang="scss" scoped>
    .uni-thumb-ktp {
        flex-shrink: 0;
        margin-right: 10px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px #f5f5f5 solid;

        .image {
            width: 100%;
            height: 100%;
        }
    }
</style>